<template>
  <div class="box">
    <h2>子组件 sub</h2>
    <!-- 2在模板中渲染props  -->
    从父组件中获取的值:<label for="">{{ $store.state.nums }}</label>
    <br />
    <!-- 4 绑定函数 -->
    <button @click="sub">值-1</button>
  </div>
</template>
<style lang="css">
.box {
  border: 1px solid #ccc;
  width: 200px;
  padding: 5px;
  margin: 20px;
}
</style>
<script>
export default {
  name: "SubItem",
  // 1.定义props
  // props: {
  //   value: {
  //     type: Number
  //   }
  // },
  // 2.在模板中渲染props
  // 3.定义一个点击函数实现add +1
  methods: {
    sub() {
      // 1. 取 props 中的 value
      // const val = this.value;
      // 2. value-1
      // 3. emit 把-1的值发送给父组件
      // this.$emit("input", val - 1);
      // 替换 emit 改为 修改 store.state
      this.$store.state.nums--;
    }
  }
};
</script>
